<!--
    This page contains the form "Wall"
    with a Javascript function that can enable the year of renovation.
-->

<script type="text/javascript">
    function visibleWall(){
        if(document.getElementById('changedWall').checked){
            document.getElementById('yearChangedWall').removeAttribute('readonly');
            document.getElementById('changedCheckedWall').style.color="black";
        }
        else{
            document.getElementById('yearChangedWall').setAttribute('readonly', 'readonly');
            document.getElementById('changedCheckedWall').style.color="grey";
            document.getElementById('yearChangedWall').value = "";
        }            
    }
</script>  
<div style="padding-top: 20px; padding-left: 20px">
    <p id="subtitle"><?php echo TXT_TAB_WALLS; ?></p>
</div>

<div id="content">
    <div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
        <form id="wallForm" method="POST">
            <table>
                <tr>
                    <th style="vertical-align: top; width: 350px; text-align: left;">
                        <!-- Titre rénovation -->
                        <?php echo TXT_CHANGED_WALLS; ?>
                        <input type="checkbox" id="changedWall" name="changedWall" onclick="visibleWall()" />
                    </th>
                    <td style="width: 600px;">
                        <!-- DIV rénovation -->
                        <div id="changedWallDiv" style="width: 400px; padding: 0px;">
                            <span id="changedCheckedWall"><?php echo TXT_CHANGED_YEAR; ?></span>
                            <input type="date" id="yearChangedWall" name="yearChangedWall" readonly />
                        </div>
                    </td>
                </tr>
                <tr>
                    <th style="vertical-align: top; padding-top: 40px; text-align: left;">
                        <!-- Titre orientation -->
                        Orientation du mur A
                    </th>
                    <td style="padding-top: 40px;">
                        <!-- input orientation -->
                        <div>
                            <select id="selectOrientation" name="selectOrientation" onchange="eventHeating()">
                                <option selected value="Veuillez choisir une option">
                                    <?php echo TXT_PLEASE_SELECT_AN_OPTION; ?>
                                </option>
                                <option value="Nord"><?php echo TXT_NORTH; ?></option>
                                <option value="Sud"><?php echo TXT_SOUTH; ?></option>
                                <option value="Est"><?php echo TXT_EAST; ?></option>
                                <option value="Ouest"><?php echo TXT_WEST; ?></option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th style="vertical-align: top; padding-top: 40px; text-align: left;">
                        <!-- Titre superficie -->
                        <?php echo TXT_AREA ?>
                    </th>
                    <td style="padding-top: 40px;">
                        <!-- DIV contenant la superficie des murs -->
                        <div id="areaWallsDiv" style="padding: 0px; ">
                            <div style="float: left;">
                                <div id="areaWallA">
                                    <?php echo TXT_WALL ?> A = 
                                    <input id="inputareaWallA" name="areaWallA" class="changeArea" />
                                    m2
                                </div>
                                <div id="areaWallB" class="cacher">
                                    <?php echo TXT_WALL; ?> B = 
                                    <input id="inputareaWallB" name="areaWallB" class="changeArea" style="size:5px;"/>
                                    m2
                                </div>
                                <div id="areaWallC" class="cacher">
                                    <?php echo TXT_WALL; ?> C = 
                                    <input id="inputareaWallC" class="changeArea" name="areaWallC" style="size:5px;"/>
                                    m2
                                </div>                       
                            </div>
                            <div style="float: left; padding-left: 30px;">  
                                <div id="areaWallD" class="cacher">
                                    <?php echo TXT_WALL; ?> D = 
                                    <input id="inputareaWallD" class="changeArea" name="areaWallD" style="size:5px;"/>
                                    m2
                                </div>
                                <div id="areaWallE" class="cacher">
                                    <?php echo TXT_WALL; ?> E = 
                                    <input id="inputareaWallE" class="changeArea" name="areaWallE" style="size:5px;"/>
                                    m2
                                </div>
                                <div id="areaWallF" class="cacher">
                                    <?php echo TXT_WALL; ?> F = 
                                    <input id="inputareaWallF" class="changeArea" name="areaWallF" style="size:5px;"/>
                                    m2
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>        
                <tr>
                    <th style="vertical-align: top; padding-top: 40px; text-align: left;">
                        <!-- Titre façades -->
                        Façades de la maison
                    </th>
                    <td style="padding-top: 40px;">
                        <!-- DIV contenant les images des murs -->
                        <div id="ImgsArea">
                            <img id="areaShape" src="../images/forms/wallsArea/SupSquare.png" alt="imageMur" style="height:175px;"/>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div><!-- END div content -->

<script>

function calculateWallsArea(){
        //Calcul à la volé de la surface des murs
    var areaA = document.getElementById("inputareaWallA");
    var areaB = document.getElementById("inputareaWallB");
    var areaC = document.getElementById("inputareaWallC");
    var areaD = document.getElementById("inputareaWallD");
    var areaE = document.getElementById("inputareaWallE");
    var areaF = document.getElementById("inputareaWallF");
    
    
    var m1 = document.getElementById("M1");
    var m2 = document.getElementById("M2");
    var m3 = document.getElementById("M3");
    var m4 = document.getElementById("M4");
    var m5 = document.getElementById("M5");
    var m6 = document.getElementById("M6");
    var m7 = document.getElementById("M7");
    
    var houseArea = document.getElementById('area');
    var height = document.getElementById('inputH');
    
    //Récupération de l'id de la forme choisi
        var shape = $('input[name=shape]:checked', '#gen').val();
    
    //Champs calculé si la hauteur est remplie et si la surface de la maison est rempli
    if(houseArea.value != ''){
        if(height.value != ''){       
            //Calcul selon la forme choisi
            switch(shape){
                //Square
                case '1':
                    areaA.value = m1.value * height.value;
                  break;
                  
                //Rectangle
                case '2':
                    areaA.value = m1.value * height.value;
                    areaB.value = m2.value * height.value;
                    break;
                    
                //Forme L
                case '3':
                    areaA.value = m4.value * height.value;
                    areaB.value = m1.value * height.value;
                    areaC.value = m2.value * height.value;
                    areaD.value = m3.value * height.value;
                    break;
                    
                 //Forme U
                case '4':
                    areaA.value = m2.value * height.value;
                    areaB.value = m1.value * height.value;
                    areaC.value = m6.value * height.value;
                    areaD.value = m3.value * height.value;
                    break;
                    
                //Forme 2 rect. décalé
                case '5':
                    areaA.value = m5.value * height.value;
                    areaB.value = m4.value * height.value;
                    areaC.value = m2.value * height.value;
                    areaD.value = m1.value * height.value;
                    areaE.value = m6.value * height.value;
                    areaF.value = m7.value * height.value;
                    break;
                    
                //Forme T
                case '6':
                    areaA.value = m2.value * height.value;
                    areaB.value = m5.value * height.value;
                    areaC.value = m4.value * height.value;
                    areaD.value = m1.value * height.value;
                    break;
            }
        }
        
    }
    
    
   }  
     //Fonction appelée à chaque modification des valeurs (NbFloors et M1...n)
//    $('.changeWallsArea').live('change', function() {
//        alert('asdfasdfsdfasd');
//    });

</script>
